<template>
  <!--工具条-->

  <div class="section-content clearfix">
      
    <el-col :span="24" class="toolbar">
      <el-button :type="buttonColor" @click="authViseble=true">全设备批量授权</el-button>
    </el-col>
    <!--列表-->
    <el-table
      :data="users"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      :header-row-style="{backgroundColor: titleColor}"
      style="width: 100%;"
    >
      <!-- <el-table-column type="selection">
      </el-table-column>-->
      <el-table-column type="index" label="序号" width="80" :index="indexMethod"></el-table-column>
      <el-table-column prop="nickName" label="用户名"></el-table-column>
      <el-table-column prop="tel" label="手机号"></el-table-column>
      <el-table-column prop="auth" label="权限" :formatter="formatstate"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="userCompany" label="机构名称"></el-table-column>
      <el-table-column label="状态操作">
        <template scope="scope">
          <i
            @click="handleEdit(scope.$index, scope.row)"
            title="编辑"
            icon="el-icon-edit"
            circle
            class="pb-icon icon-edit"
          ></i>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="companyName" label="厂商名">
      </el-table-column>-->
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!-- <el-button type="danger" @click="authViseble=true">全设备批量授权</el-button> -->
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="10"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>
    <el-dialog title="批量授权" v-show="authViseble" v-model="authViseble" :custom-class="dialogTitleColor" @close="authViseble=false">
      <div slot="footer" style="text-align: left; ">
        <el-form label-width="80px" :rules="editFormRules" ref="editForm">
          <!-- <el-form-item label="状态">
                        <el-select v-model="authvalue" filterable placeholder="状态">
                            <el-option v-show="false" key="0" :label="attr1[0].name" value="0"></el-option>
                            <el-option key="1" :label="attr1[1].name" value="1"></el-option>
                            <el-option v-if="auth==3" key="2" :label="attr1[2].name" value="2"></el-option>
                            <el-option v-if="auth==3" key="3" :label="attr1[3].name" value="3"></el-option>
                            <el-option key="4" :label="attr1[4].name" value="4"></el-option>

                        </el-select>
          </el-form-item>-->
          <el-table
            :data="users1"
            highlight-current-row
            v-loading="listLoading"
            @selection-change="selsChange"
            style="width: 100%;"
          >
            <!-- <el-table-column type="selection">
            </el-table-column>-->
            <el-table-column prop="deviceName" label="设备"></el-table-column>
            <el-table-column prop="nickName" label="用户名"></el-table-column>

            <el-table-column prop="auth" label="权限" width="80" :formatter="formatstate"></el-table-column>

            <el-table-column label="权限操作">
              <template scope="scope">
                <el-select v-model="scope.row.auth" filterable placeholder="状态">
                  <el-option v-show="false" key="0" :label="attr1[0].name" value="0"></el-option>
                  <el-option key="1" :label="attr1[1].name" value="1"></el-option>
                  <el-option v-if="auth==3" key="2" :label="attr1[2].name" value="2"></el-option>
                  <el-option v-if="auth==3" key="3" :label="attr1[3].name" value="3"></el-option>
                  <el-option key="4" :label="attr1[4].name" value="4"></el-option>
                </el-select>
                <!-- <i @click="handleEdit(scope.$index, scope.row)" title="编辑" icon="el-icon-edit" circle class="pb-icon icon-edit"></i> -->
              </template>
            </el-table-column>
            <!-- <el-table-column prop="companyName" label="厂商名">
            </el-table-column>-->
          </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <el-button @click.native="authViseble = false">取消</el-button>
          <el-button :type="buttonColor" @click.native="batchRemove" :loading="editLoading">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑"
      v-show="editFormVisible"
      v-model="editFormVisible"
      :custom-class="dialogTitleColor"
      @close="editFormVisible=false"
    >
      <div slot="footer" style="text-align: left; ">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
          <!-- <el-form-item label="用户名">{{editForm.userName}}</el-form-item> -->
          <el-form-item label="用户名">{{editForm.nickName}}</el-form-item>

          <el-form-item label="状态">
            <el-select v-model="editForm.auth" filterable placeholder="状态">
              <el-option v-show="false" key="0" :label="attr1[0].name" value="0"></el-option>
              <el-option key="1" :label="attr1[1].name" value="1"></el-option>
              <el-option v-if="auth==3" key="2" :label="attr1[2].name" value="2"></el-option>
              <el-option v-if="auth==3" key="3" :label="attr1[3].name" value="3"></el-option>
              <el-option key="4" :label="attr1[4].name" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button :type="buttonColor" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- <div class=" pb-top   clearfix">
                 
                
                        <el-col :span="24" v-loading="listLoading">
                            <div v-if="users.length>0">
                                <div v-for="(item,index) in users" class="deviceList-content" style="padding: 15px 15px 5px;margin: 0 10px 5px">
                
                                    <div><span class="deviceList-title">用户名:{{item.userName}}</span>
                
                
                                    </div>
                                    <div class="nature">权限:
                                        <span v-if="item.auth==0">待授权</span>
                                        <span v-if="item.auth==1">普通授权</span>
                                        <span v-if="item.auth==2">管理员</span>
                                        <span v-if="item.auth==3">拥有者</span>
                                        <span v-if="item.auth==4">拒绝</span></div>
                                    <div v-if="auth==3" class="attention">
                                        <span @click="handleEdit(index, item)">编辑</span>
                                    </div>
                                    <div class="bound" @click="handleDel(index, item)" v-if="item.auth==3">移除</div>
                                </div>
                            </div>
                        
                            <div style="text-align: center">
                                <el-pagination small @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total">
                                </el-pagination>
                            </div>
                        </el-col>
                    
                
                
    </div>-->
  </div>

  <!--编辑界面-->

  <!--新增界面-->
</template>

<script>
import echarts from "echarts";
import util from "../../common/js/util";
//import NProgress from 'nprogress'
import {
  device_delete,
  device_query,
  device_favorites_add,
  device_favorites_cancel,
  addUser,
  user_query,
  device_get_user_count,
  device_get_query_user_count,
  alarm_log_count,
  device_model_query,
  device_type_query,
  dict_query,
  device_type_relation_get,
  device_type_relation_put,
  device_type_relation_queryDevice,
  device_type_get,
  device_user_bind_queryDevices,
  device_user_bind_queryUser,
  device_user_bind_auth,
  device_user_bind_removeAuth,
  device_get
} from "../../api/api";

export default {
  data() {
    return {
      users1:[],
      authvalue: "0",
      typechllist: "",
      selectType: true,
      gridData: "",
      typelist: "",
      modellist: "",
      device_id: "",
      userclist1: "",
      scade: "",
      userclist: "",
      chartColumn: null,
      vertical: null,
      vertical1: null,
      attr: {
        deviceTypeId: "",
        attrId: "",
        attrValue: ""
      },
      filters: {
        name: "",
        deviceTypeId: null,
        deviceSn: null,
        deviceModelId: null,
        terminalUser: "",
        guild: "",
        area: "",
        address: ""
      },
      area: "",
      address: "",
      users: [],
      total: 0,
      total1: 0,
      page1: 1,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列

      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ]
      },
      linecount: {},
      //编辑界面数据
      editForm: {},

      addFormVisible: false, //新增界面是否显示
      authViseble: false, //批量授权
      addLoading: false,
      addFormRules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ]
      },
      //新增界面数据
      addForm: {
        name: "",
        sex: -1,
        age: 0,
        birth: "",
        addr: ""
      },
      alarm_count: "",
      industry: "",
      user_t: "",
      cityData: "",
      cityDatas: "",
      auth: "",

      facility: {},
      attr1: [{
        name: "待授权",
        value: 0
      },{
        name: "查看",
        value: 1
      },{
        name: "控制",
        value: 2
      }, {
        name: "管理员",
        value: 3
      },{
        name: "拒绝",
        value: 4
      }]
    };
  },
  computed:{
            buttonColor(){
                return this.$store.state.buttonColor
            },
            titleColor(){
                return this.$store.state.titleColor
            },
            dialogTitleColor(){
                return this.$store.state.dialogTitleColor
            },
        },
  methods: {
    indexMethod(index) {
      let num = (this.page - 1) * 10 + index + 1;
      return num;
    },
    getUser: function() {
      let para = {
        deviceId: sessionStorage.getItem("facility_details")
      };
      this.loading = true;
      //NProgress.start();
      device_get(para).then(res => {
        // res.code=403;
        this.begCode(res.code, res.message);
        this.facility = res.data;
      });
    },
    //性别显示转换
    formatSex: function(row, column) {
      return row.sex == 1 ? "男" : row.sex == 0 ? "女" : "未知";
    },
    formatstate(row, column) {
      return row.auth == 4
        ? this.attr1[4].name
        : row.auth == 3
        ? this.attr1[3].name
        : row.auth == 2
        ? this.attr1[2].name
        : row.auth == 1
        ? this.attr1[1].name
        : row.auth == 0
        ? this.attr1[0].name
        : "未知";
    },
    handleCurrentChange1(val) {
      this.page1 = val;
      this.getUsers1();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getUsers();
    },
    getUsers1() {
      let para = {
        pageNo: this.page1,
        pageSize: 9
      };
      device_get_query_user_count(para).then(res => {
        this.begCode(res.code, res.message);
        this.userclist1 = res.data.list;
        this.total1 = res.data.totalCount;
      });
    },
    //获取用户列表
    getUsers() {
      if (this.cityData[this.area]) {
        this.filters.address = this.cityData[this.area].text + this.address;
      }
      if (this.selectType) {
        let para = {
          pageNo: this.page,
          pageSize: 10,
          deviceId: sessionStorage.getItem("facility_details")
        };
        this.listLoading = true;
        //NProgress.start();
        device_user_bind_queryUser(para).then(res => {
          this.begCode(res.code, res.message);
          this.total = res.data.totalCount;
          this.users = res.data.list;
          this.page = res.data.pageNo;
          this.listLoading = false;
          if (this.users.length == 0) {
            this.$message({
              message: "暂无数据",
              type: "warning"
            });
          }

          //NProgress.done();
        });
        let para1 = {
          pageNo: this.page,
          pageSize: 10000,
          deviceId: "",
          auth: 0
        };
        device_user_bind_queryUser(para1).then(res => {
          this.begCode(res.code, res.message);
          this.users1 = res.data.list;
          for (let i in this.users1) {
            this.users1[i].auth = this.users1[i].auth.toString();
          }

          //NProgress.done();
        });
      } else {
        if (
          !this.attr.deviceTypeId &&
          !this.attr.attrId &&
          !this.attr.attrValue
        ) {
          this.$message({
            message: "类型属性值不能为空",
            type: "warning"
          });

          return false;
        }
        let para = {
          deviceTypeId: this.attr.deviceTypeId,
          attrId: this.attr.attrId,
          attrValue: this.attr.attrValue,
          pageNo: this.page,
          pageSize: 1000
        };
        this.listLoading = true;
        //NProgress.start();
        device_type_relation_queryDevice(para).then(res => {
          this.begCode(res.code, res.message);
          this.total = res.data.totalCount;
          this.users = res.data.list;
          this.listLoading = false;

          //NProgress.done();
        });
      }
    }, //前往详情页
    details: function(row) {
      if (row.auth == 2 || row.auth == 3) {
        sessionStorage.setItem("facility_details", row.deviceId);
        this.$router.push({
          path: "/conditioned/deviceDatail"
        });
      } else {
        this.$message({
          message: "您没有权限",
          type: "warning"
        });
      }
    },
    //取消关注
    collectdel: function(index, row) {
      let para = {
        deviceIdList: [row.deviceId]
      };
      device_favorites_cancel(para).then(res => {
        this.begCode(res.code, res.message);
        this.listLoading = false;
        //NProgress.done();
        this.$message({
          message: "取消设备关注成功",
          type: "success"
        });
        this.getUsers();
      });
    },
    //关注
    collect: function(index, row) {
      let para = {
        deviceId: row.deviceId
      };
      device_favorites_add(para).then(res => {
        this.begCode(res.code, res.message);

        this.listLoading = false;
        //NProgress.done();
        this.$message({
          message: "关注设备成功",
          type: "success"
        });
        this.getUsers();
      });
    },
    handleDel: function(index, row) {
      this.$confirm("确认移除吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          // this.listLoading = true;
          //NProgress.start();
          let para = Object.assign({}, row);
          console.log(para);
          device_user_bind_removeAuth(para).then(res => {
            console.log(1);
            this.begCode(res.code, res.message);
            // this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getUsers();
          });
        })
        .catch(() => {});
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      row.auth = row.auth.toString();
      if (this.auth != 3) {
        this.$message({
          message: "你没有权限修改状态",
          type: "warning"
        });
        return false;
      }

      this.editFormVisible = true;

      this.editForm = Object.assign({}, row);
    },
    //显示新增界面
    handleAdd: function() {
      this.$router.push({
        path: "/devices/add"
      });
      this.addFormVisible = true;
      this.addForm = {
        name: "",
        sex: -1,
        age: 0,
        birth: "",
        addr: ""
      };
    },
    //编辑
    editSubmit: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.editForm);

            device_user_bind_auth(para).then(res => {
              this.begCode(res.code, res.message);
              this.editLoading = false;
              //NProgress.done();
              if (res.code == 0) {
                this.$message({
                  message: "提交成功",
                  type: "success"
                });
                this.editFormVisible = false;
                this.getUsers();
                if (this.editForm.auth == 3) {
                  // this.$router.back(-1);
                }
              }
            });
          });
        }
      });
    },
    //新增
    addSubmit: function() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.addLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.addForm);
            para.birth =
              !para.birth || para.birth == ""
                ? ""
                : util.formatDate.format(new Date(para.birth), "yyyy-MM-dd");
            addUser(para).then(res => {
              this.begCode(res.code, res.message);
              this.addLoading = false;
              //NProgress.done();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs["addForm"].resetFields();
              this.addFormVisible = false;
              this.getUsers();
            });
          });
        }
      });
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function() {
      // var ids = this.sels.map(item => item.deviceId).toString();
      console.log(this.sels);
      this.$confirm("确认修改选中账号吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          for (let i in this.users1) {
            let para = Object.assign({}, this.users1[i]);
            // para.auth = this.authvalue;
            console.log(para)
            device_user_bind_auth(para).then(res => {
              this.begCode(res.code, res.message);
              this.editLoading = false;
              //NProgress.done();
              if (res.code == 0) {
                this.$message({
                  message: "提交成功",
                  type: "success"
                });
                this.authViseble = false;
                this.getUsers();
                if (this.editForm.auth == 3) {
                  // this.$router.back(-1);
                }
              }
            });
          }
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.auth = 3;
    // this.attr1 = JSON.parse(sessionStorage.getItem("user")).company.attr1;
    // this.attr1 = JSON.parse(this.attr1);

    if (this.attr1) {
      if (!this.attr1[0].name) {
        this.attr1[0].name = "待授权";
      }
      if (!this.attr1[1].name) {
        this.attr1[1].name = "查看";
      }
      if (!this.attr1[2].name) {
        this.attr1[2].name = "控制";
      }
      if (!this.attr1[3].name) {
        this.attr1[3].name = "管理员";
      }
      if (!this.attr1[4].name) {
        this.attr1[4].name = "拒绝";
      }
    } else {
      this.attr1 = [
        {
          name: "待授权",
          value: 0
        },
        {
          name: "查看",
          value: 1
        },
        {
          name: "控制",
          value: 2
        },
        {
          name: "管理员",
          value: 3
        },
        {
          name: "拒绝",
          value: 4
        }
      ];
    }

    this.getUser();
    this.getUsers();
  },
  destroyed: function() {
    clearInterval(this.t);
  }
};
</script>

<style scoped>
.userlist {
  font-size: 14px;
}

#allmap {
  height: 450px;
  overflow: hidden;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple-light {
  background: #e5e9f2;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.dev-select {
  width: 100px;
  float: right;
  margin: 3px;
}

.dev-title {
  display: inline-block;
  line-height: 36px;
  text-indent: 10px;
  color: #fff;
}

.el-form--inline .el-form-item {
  /* display: block; */
  margin: 0 2%;
  margin-bottom: 5px;
  width: 45% !important;
}

.el-form--inline .el-form-item__content {
  display: block;
}

.pb-top .toolbar .el-input .el-input__inner {
  width: 100%;
  height: 40px;
  border-radius: 0;
  border: solid 1px #cccccc;
  opacity: 0.91;
}

.el-select .el-input .el-select__caret {
  color: #ccc;
}

.list-bt {
  text-align: center;
}

.el-button--primary {
  /* width: 140px; */
  height: 40px;
  /* background-color: #47a6ff; */
  border-radius: 3px;
  opacity: 0.91;
}

.nature {
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.nature span {
  color: #47a6ff;
}

.bound {
  border: solid 1px #ccc;
  border-radius: 4px;
  padding: 3px 10px;
  position: absolute;
  bottom: 5px;
  right: 15px;
}

.dataill-bg2 {
  /* background: url(../../assets/bg2.png); */
  background-size: 100% 100%;
  background-position: 100% 100%;
  /* box-shadow: 0px 2px 5px 0px 
            rgba(0, 0, 0, 0.15); */
  border-radius: 6px;
  opacity: 0.91;
  margin: 5px 10px;
  color: #fff;
  padding: 15px;
}
</style>